<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>报表维护</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="admui.com">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Safari浏览器添加到主屏幕（IOS） -->

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">

    <meta name="msapplication-TileColor" content="#62a8ea">
    <link href="./bootstrap.css" th:href="@{/bootstrap.css}" rel="stylesheet">
    <link href="./css/base/web-icon.css" th:href="@{/css/base/web-icon.css}" rel="stylesheet">
    <link href="./css/base/site.css" th:href="@{/css/base/site.css}" rel="stylesheet">
    <link href="./css/base/base.css" th:href="@{/css/base/base.css}" rel="stylesheet">
    <script src="../public/js/vendor/jquery/jquery.min.js" th:src="@{/js/vendor/jquery/jquery.min.js}"></script>
    <script src="../public/js/vendor/jquery-validation/jquery.validate.min.js"
            th:src="@{/js/vendor/jquery-validation/jquery.validate.min.js}"></script>

    <link rel="stylesheet" href="../public/js/layui/css/layui.css" th:href="@{/js/layui/css/layui.css}">
    <script src="../public/js/layui/layui.all.js" th:src="@{/js/layui/layui.all.js}"></script>
</head>
<body>
<div class="col-12" style="height:80%;vertical-align: bottom">

    <div class="row">
        <button type="button" class="layui-btn" id="btnSave">保存</button>
    </div>
    <div class="row">
        <div class="checkbox-default">已选中角色：</div>
        <div class="checkbox-default" id="roleText" style="color: red"></div>
    </div>
    <div class="row">

        <div class="col-2 layui-tree" id="roleTree"></div>
        <div class="col-10 layui-tree" id="permTree"></div>
    </div>
    <script th:inline="none">

        layui.use('element', function () {
            var element = layui.element;
        })

        $.get("/perm/role", function (res) {
            if (res.code == 0) {
                var datas = res.data;
                var newData = new Array();
                for (var index = 0; index < datas.length; index++) {
                    var obj = new Object()
                    obj.title = datas[index].roleName;
                    obj.field = "roleName";
                    obj.id = datas[index].roleId
                    newData.push(obj)
                }

                layui.use('tree', function () {
                    var tree = layui.tree;


                    //渲染
                    var inst1 = tree.render({
                        elem: '#roleTree', //绑定元素
                        spread: true,

                        click: function (obj) {
                            $("#roleText").html(obj.data.title)
                            //获取角色拥有的权限


                        }
                        , data: newData
                    });
                });

            }

        })
        $.get("/perm/infos?roleId=", function (res) {
            if (res.code == 0) {
                var datas = res.data;
                var newData = new Array();
              /*  for (var index = 0; index < datas.length; index++) {
                    var obj = new Object()
                    obj.title = datas[index][""];
                    obj.field = "roleName";
                    obj.id = datas[index].roleId
                    newData.push(obj)
                }*/

                layui.use('tree', function () {
                    var tree = layui.tree;


                    //渲染
                    var inst1 = tree.render({
                        elem: '#roleTree', //绑定元素
                        spread: true,

                        click: function (obj) {
                            $("#roleText").html(obj.data.title)
                            //获取角色拥有的权限


                        }
                        , data: newData
                    });
                });
            } else {
            }
        })
        layui.use("table", function () {
            var table = layui.table;
            table.render(
                {
                    elem: "roleDt",
                    height: 315,
                    url: "/perm/role",
                    page: true,
                    cols: [[
                        {field: "roleId", title: "角色Id", width: 80, sort: true, hide: true, fixed: 'left'},
                        {field: "roleName", title: "角色名", width: 80, sort: true, fixed: 'left'}

                    ]]
                }
            )
        })

    </script>

</div>
</body>
</html>